<template>
    <view class="chatAudio">
        <view class="audioPlay" v-if="show">
            <view class="content">
                <!-- 录制中动图，底色变化 -->
                <view class="gif" :class="{ 'red': closeShow }">
                    <view class="ripple">
                        <span style="--d: 9"></span>
                        <span style="--d: 7"></span>
                        <span style="--d: 5"></span>
                        <span style="--d: 3"></span>
                        <span style="--d: 1"></span>
                        <span style="--d: 0"></span>
                        <span style="--d: 1"></span>
                        <span style="--d: 3"></span>
                        <span style="--d: 5"></span>
                        <span style="--d: 7"></span>
                        <span style="--d: 9"></span>
                    </view>
                    <!-- <image src="../../static/img/33.gif" mode=""></image> -->
                </view>
                <view class="close">
                    <!-- ×号 颜色变化-->
                    <view class="cross bgWhite" v-if="!closeShow">X</view>
                    <view class="cross bgGrey" v-if="closeShow">X</view>
                    <!-- <image src="../../static/img/32.png" mode="" v-if="!closeShow"></image>
                    <image src="../../static/img/28.png" mode="" v-if="closeShow"></image> -->
                </view>
                <view class="bom">
                    <text v-if="!closeShow">松开 发送</text>
                    <text v-if="closeShow">松开 取消</text>

                    <!-- 底图颜色变化 -->
                    <view class="elliptic bgWhite" v-if="!closeShow"></view>
                    <view class="elliptic bgTransparent" v-if="closeShow"></view>
                    <!-- <view v-if="!closeShow">白底图</view>
                    <view v-if="closeShow">黑底图</view> -->
                    <!-- <image src="../../static/img/30.png" mode="" v-if="!closeShow"></image>
                    <image src="../../static/img/31.png" mode="" v-if="closeShow"></image> -->

                    <!-- 计时器 -->
                    <view class="times">
                        <!-- <u-circle-progress active-color="#6C9FEB" :percent="times" bg-color="" width="140"
                            border-width="7"></u-circle-progress> -->
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
export default {
    name: 'chatAudio',
    props: {
        audioShow: {
            type: Boolean,
            default: false
        },
        audioXY: {
            type: Object,
        },
        audioTouchendShow: {
            type: Boolean,
            default: false
        },
    },
    // watch: {
    //     audioShow: {
    //         immediate: true,
    //         handler(val) {
    //             console.log('chatAudio audioShow', val);
    //         }

    //     }
    // },
    watch: {
        // audioShow：true录制界面显示，开始录音，false关闭。
        audioShow(e, oldVal) {
            if (e) {
                console.log('开始录音')
                this.status = 0;
                this.audioSrc = '';
                this.number = 1;
                this.show = true;

                // 计算录制时长，>=60 录制结束
                this.times = 1;
                this.timesInt = setInterval(() => {
                    this.times++;
                    // console.log(this.times)
                    if (this.times >= 60) {
                        clearInterval(this.timesInt);
                        this.closeShow = false;
                        recorderManager.stop();
                        console.log('结束录制');
                    }
                }, 1000);

                // 开始录制
                recorderManager.start();

                // 获取关闭按钮.close在屏幕中的位置信息
                this.$nextTick(() => {
                    // let close = uni.createSelectorQuery().select(".close");
                    // console.log('nextTick', close);
                    // close.boundingClientRect((data) => {
                    //     console.log('nextTick boundingClientRect', data);
                    //     this.dom = data;
                    // }).exec();
                    const query = uni.createSelectorQuery().in(this);
                    query.select(".close").boundingClientRect();
                    query.exec(res => {
                        this.dom = res[0];
                    });
                })
            } else {
                this.show = false;
            }
        },
        // 手指在屏幕中的位置，判断是否：录制中/删除
        audioXY(e) {
            let x = e.x;
            let y = e.y;
            let left = this.dom.left;
            let top = this.dom.top;
            if (x > left && x < left + this.dom.width && y > top && y < top + this.dom.height) {
                this.closeShow = true;
            } else {
                this.closeShow = false;
            }
        },
        // 手指结束触摸，通知父组件关闭弹窗，根据this.closeShow类型，判断是取消还是发送
        audioTouchendShow(e) {
            this.$emit('closeAudioShow');
            if (this.number == 1) {
                this.number++;
                if (this.times <= 1) {
                    uni.showToast({
                        title: '说话时间太短',
                        duration: 2000,
                        icon: 'error'
                    });
                    clearInterval(this.timesInt);
                    this.closeShow = false;
                    recorderManager.stop();
                    return;
                }
                if (this.closeShow) {
                    console.log('取消录制')
                    clearInterval(this.timesInt);
                    this.closeShow = false;
                    recorderManager.stop();
                } else {
                    console.log('发送音频');
                    clearInterval(this.timesInt);
                    this.closeShow = false;
                    recorderManager.stop();
                    this.status = 1;
                }
            }
        }
    },
    data() {
        return {
            show: false, // 弹窗
            closeShow: false, // 正常/删除
            winSize: {},
            dom: {}, // 删除按钮位置

            times: 1, // 计时器
            timesInt: null, // 计时器
            status: 0, //0录制中，1录制结束。
            number: 1,
        }
    },
    mounted() {
        // 录音停止事件，会回调文件地址，如果status == 1，上传音频，并通知父组件发送音频信息
        recorderManager.onStop((res) => {
            this.audioSrc = res.tempFilePath;
            if (this.status == 1) {
                // this.upload(this.audioSrc, 'audio');
                this.upload(res, 'audio');
            }
        });
        uni.getSystemInfo({
            success: (res) => {
                this.winSize = {
                    "witdh": res.windowWidth,
                    "height": res.windowHeight
                }
            }
        })
    },
    methods: {
        // 上传音频，并发送
        upload(file, type) {
            // this.$uploadImage('/api/***', file).then(res => {
            //     if (res.code == 1) {
            this.$emit('submit', file, type)
            //     }
            // })
        },
    },
}
</script>
<style lang="scss" scoped>
.bgWhite {
    background: #FFF;
    color: #3a3a3a;
}

.bgTransparent {
    background: rgba(255, 255, 255, 0.3);
}

.bgGrey {
    background: #3a3a3a;
    color: #9e9e9e;
}

.chatAudio {
    color: red;

    .audioPlay {
        width: 100%;
        min-height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 99;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, .8);
        text-align: center;

        .content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 120rpx;

            .gif {
                width: 364rpx;
                height: 172rpx;
                background: #6C9FEB;
                border-radius: 32rpx;
                margin: auto;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all .5s;

                uni-image {
                    width: 160rpx;
                    height: 48rpx;
                }
            }

            .red {
                background-color: #FB5353;
            }

            .close {
                margin: 176rpx auto 42rpx;
                width: 120rpx;
                height: 120rpx;

                .cross {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 50%;
                    font-size: 45rpx;
                }

                uni-image {
                    width: 132rpx;
                    height: 132rpx;
                }
            }

            .bom {
                position: relative;
                width: 100%;

                .elliptic {
                    // height: 100px;
                    height: 180rpx;
                    width: 100%;
                    border-radius: 75% / 100% 100% 0 0;
                    margin-top: 26rpx;
                }

                .times {
                    position: absolute;
                    left: 50%;
                    top: 125rpx;
                    margin-left: -20rpx;
                }

                uni-image {
                    width: 750rpx;
                    height: 254rpx;
                    margin-top: 26rpx;
                }

                uni-text {
                    font-size: 28rpx;
                    color: #9E9E9E;
                }
            }

        }
    }
}


.ripple {
    display: flex;
    align-items: center;
    position: relative;
    height: 40%;

    span {
        /* background: linear-gradient(to top, #494349 0%, #fef9d7 100%); */
        background: #494349;
        width: 4rpx;
        height: 20%;
        border-radius: calc(50% * 0.2 * 0.5);
        margin-right: 8rpx;
        animation: loading 1.2s infinite linear;
        animation-delay: calc(0.2s * var(--d));
    }

    span:last-child {
        margin-right: 0px;
    }
}

@keyframes loading {
    0% {
        /* background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%); */
        height: 20%;
        border-radius: calc(50% * 0.2 * 0.5);
    }

    50% {
        /* background-image: linear-gradient(to top, #d299c2 0%, #fef9d7 100%); */
        height: 100%;
        border-radius: calc(50% * 1 * 0.5);
    }

    100% {
        /* background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%); */
        height: 20%;
        border-radius: calc(50% * 0.2 * 0.5);
    }
}
</style>